Note: Jetpack’s Lazy Loading feature was first introduced in 2018. At the time, few other tools offered such functionality. It offered a much needed performance boost to WordPress sites, especially those with a large number of images.

A couple of years later, a new lazy loading web standard was introduced, and WordPress itself started supporting this standard. Today, modern browsers all support lazy loading, and WordPress itself comes with built-in lazy loading functionality for images and videos.

Considering this positive change, Jetpack’s Lazy Loading feature is no longer necessary. You have the option to disable it on your website, and you will immediately begin benefiting from the native lazy loading feature offered by WordPress itself.

To facilitate this transition, Jetpack’s feature will be deprecated and eventually removed from both the Jetpack plugin and the Jetpack Boost plugin in November 2023.

If you’re a website owner, you’ve likely thought about site speed at least once in the past. After all, Google considers speed when determining where to place sites in search results. So, if your site is slow to load, you’re at a disadvantage when it comes to ranking. And we all know that higher rankings lead to more traffic.

So, how do you make sure your WordPress site is loading as quickly as possible? One way is to lazy load your images.

Lazy loading is a technique that delays the rendering of images and videos until they’re needed. Implementing this can speed up your site considerably, and the great news is that you don’t need to be a developer to put this to work.

Today, we’ll show you how to lazy load images and videos in WordPress using two methods: with a plugin and without.

Lazy loading is a common technique used to improve page speed. The idea is simple: instead of loading all images on a page when a visitor first arrives, it only renders the images that are visible. Then, as the visitor scrolls down the page, more images are loaded as needed.

This means that if a visitor never scrolls down to the bottom of a page, images below the area of the page viewed are never loaded. Thus, lazy loading can save precious milliseconds (or even seconds) off your page load time.

Additionally, lazy loading can also help you conserve bandwidth. This is especially important if you have people who visit your site on a mobile device. By deferring the loading of images and videos that are not visible, you can decrease the amount of data used.

In general, lazy loading works in one of two ways. WordPress, starting with version 5.5, adds an HTML5 attribute called “loading.” In this case, the browser handles all parts of the lazy loading process without the need for any extra JavaScript. 

Another method, developed before HTML5’s attribute, is through some creative JavaScript. In this case, an empty placeholder is served upon page load, then JavaScript is used to load images as they come into the viewport. 

Either way, only the images that are needed by the browser are loaded. Other images are loaded once a visitor scrolls down the page. 

There are a few different ways to do this, which we’ll discuss in more detail below. But that’s the gist of how lazy loading works.

There are three primary benefits to lazy loading images:

Increased site speed is usually the primary motivation for implementing lazy loading. By waiting to render unnecessary images, you can decrease your page load time. This is especially true if you have a lot of images on a page, or if your images are large.

Next, lazy loading can help you conserve bandwidth. If visitors never venture down the page, there’s no wasted bandwidth loading images that they’ll never see.

Finally, lazy loading can improve your user experience. This is because visitors don’t have to wait for all the images on a page to load before they can start engaging with your site. 

Yes, as of WordPress 5.5, lazy loading is enabled by default automatically upon installation. However, there are some ways to customize the experience that are pretty straightforward and intuitive. We’ll discuss these methods in more detail below.

In most cases, lazy loading your images is a great idea if you want to improve your page speed or conserve bandwidth. However, there are some potential drawbacks to consider as well.

If you lazy load your images, the layout of your page may shift. For example, if you have a sidebar on the right side of your page, and you lazy load an image that’s located within it, the sidebar may move down to make room. This can be very disorienting for your visitors.

As a general rule, using placeholders is recommended to avoid this issue.

If you don’t do it properly, lazy loading images can cause search engines, like Google, to have trouble indexing them. Content is king when it comes to rankings, and in this case, you could lose valuable chunks.

Your images may no longer appear in search results and, depending on how important the images are in relation to the rest of the page content (like product images for an ecommerce listing), it could tank your regular search rankings as well. 

That said, if you set up lazy loading properly, this won’t be an issue. That’s why, unless you’re a confident developer, your best course of action is to use a lazy loading plugin or stick with the default lazy loading included with WordPress. 

Additionally, lazy loading can cause issues with some WordPress plugins — like plugins that use images to generate social media previews. 

Any time you make changes to your site, you should test them thoroughly to make sure everything is acting as it should. 

And, in case something does go wrong, have a backup of your WordPress site handy for a quick recovery. 

Lazy loading is now enabled by default in WordPress. If you’re not using a modern WordPress iteration (though we recommend you do), or if you want more granular control over the lazy loading process, you can do so using one of two distinct methods: using a plugin or adding code to your site.

If you’re not an experienced developer, we recommend using a plugin because any time you edit the code of your site, you risk running into issues. Even if you have backups on hand in case you break something, it still may be best to simply use a reputable plugin. 

Jetpack Boost is a free plugin dedicated to helping you gauge and improve site performance. It offers functionality like: 

To get started with Jetpack Boost, download it for free from the WordPress plugin directory.

Or, in your WordPress dashboard, go to Plugins → Add New, then search for “Jetpack Boost” and click Install Now. Once installed, click Activate.

Next, go to the new dashboard menu option titled Boost. Then, click Start for free.

On the next page, scroll down to the large toggle that says Lazy Image Loading and turn it on. Now, take a look at your site and make sure that everything’s rendering properly and looks good. That’s it! Lazy loading is good to go with just a few clicks.

If you want to take things one step further and customize your site’s lazy loading, you can do so using code snippets, which you can add to your functions.php file. Or, you can insert them with a functionality plugin.

Here are just a few tasks you can accomplish:

For example, if you want to exclude a CSS class from the lazy loading process, you would use this code:

For more details, check out the full lazy loading documentation.

As we mentioned earlier, WordPress, by default, enables lazy loading for all images that have set dimensions. You don’t need to turn anything on or add any code to do this. However, there may be times that you want to customize how this functionality works.  

For example, let’s say that you don’t want template images to be included. You would add this code to your functions.php file:

Or, perhaps you want to get super granular and turn off lazy loading for specific images. You can do this by assigning an extra image class to each image when added to a page or post and then adding that class to the following code in your functions.php file:

To add the image class skip-lazy in the above example to an image: 

You can learn more about the possibilities in WordPress documentation.

The easiest speed optimization plugin for WordPress

Jetpack Boost gives your site the same performance advantages as the world’s leading websites, no developer required.

If you want to lazy load your videos, you can do so by adding code to the video itself in the post or page. This code should look something like this: 

Want to learn more about WordPress lazy loading? We’ve answered some frequently asked questions below: 

Deferring offscreen images means waiting to load images until the rest of the critical, above-the-fold content has loaded. There are several ways to do this, but WordPress sites typically use lazy loading.

Essentially, lazy loading is a method of deferring offscreen images. 

Yes, you can lazy load background images if you’d like. Jetpack Boost turns on lazy loading for background images. However, depending on how your images are set up, it may not be able to identify all of them. For example, if the image is loaded through the background:url property, the plugin won’t read it as a picture and, therefore, won’t enable lazy loading for it.

In that situation, you can use a tool like Lazy Loader, which will allow you to select the specific background images you want to lazy load.

Yes, you can! To do so, insert the following code snippet from WPOrbit into your theme’s functions.php file. If you’re not sure how to do this, check out our guide to accessing and editing the functions.php file.